<template>
  <div class="todo-item">
      <div class="item" @click="click">
        <div class="left">
          <span class="type">{{types[item.type]}}    {{parseTime(item.date)}}</span>
          <span class="shop">{{item.title}}</span>
        </div>
        <div class="btns" >
          <div class="btn" :class="color">
            {{item.status==2?item.score+'分':statusEnum[item.status]}}
          </div>
        </div>
        <div @click.stop="close" class="close" v-if="item.status === 0">
          <span class="iconfont iconcha"></span>
      </div>
    </div>
  </div>
</template>

<script>
import { TODO_TYPES } from '../../const'
import { parseTime } from '@/util/time'

export default {
  props: {
    item: Object
  },
  computed: {
    types () {
      return TODO_TYPES
    },
    color () {
      switch (this.item.status) {
        case 1: return 'done'
        case 2: return 'score'
        default: return ''
      }
    }
  },
  methods: {
    parseTime (time) {
      return parseTime(time, '{y}-{m}-{d}')
    },
    click () {
      this.$emit('click')
    },
    close () {
      this.$emit('close')
    }
  },
  data () {
    return {
      statusEnum: [
        '待完成', '待考核', '已评分'
      ]
    }
  }
}
</script>

<style scoped lang="stylus">
  .todo-item
    padding 10px
    .item
      position relative
      display flex
      align-items center
      justify-content space-between
      height:96px;
      overflow: hidden;
      background:rgba(255,255,255,1);
      box-shadow:0px 3px 7px 0px rgba(122,122,122,0.52);
      border-radius:10px;
      .left
        padding-left 21px
        flex 1
        display flex
        flex-direction column
        justify-content space-between
        align-items flex-start
        .type
          dpr-font(15px)
          font-family:PingFang SC;
          font-weight:400;
          color:rgba(85,84,93,1);
        .shop
          margin-top 9px
          dpr-font(12px)
          font-weight:normal;
          color:rgba(185,183,192,1);
      .btns
        width 95px
        flex 0 0 95px
        display flex
        align-items center
        justify-content flex-start
        .btn
          display flex
          justify-content center
          align-items center
          width:59px;
          height:25px;
          background:rgba(249,165,40,1);
          box-shadow:0px 3px 7px 0px rgba(249,165,40,0.52);
          border-radius:9px;
          dpr-font(12px)
          font-family:PingFang SC;
          font-weight:400;
          color:rgba(255,255,255,1);
          &.score
            background:rgba(185,183,192,1);
            color:rgba(236,234,234,1);
          &.done
            background:rgba(89,142,254,1);
            color #FFFFFF
      .close
        z-index 1
        position absolute
        right 12px
        top 12px
        display flex
        flex-direction column
        justify-content flex-start
        .iconfont
          dpr-font(10px)
          color #B9B7C0

</style>
